<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8"></meta>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
	</head>
	<body>
		<div class="left border">
			<div id="litiBar1" style="width:100%;height:400px;background-color: #000;"></div>
		</div>
	</body>
	<script type="text/javascript">
const dataList = 
[ 
  { name: '周一', value: '120' },
  { name: '周二', value: '200' },
  { name: '周三', value: '150' },
  { name: '周四', value: '80' },
  { name: '周五', value: '70' },
  { name: '周六', value: '110' },
  { name: '周天', value: '130' },
]
let max = dataList.map(item => item).sort((a,b) => b.value - a.value)[0]
let dataMaxList = new Array(dataList.length).fill(max)
option = {
  xAxis: {
    type: 'category',
    data: dataList.map(item => item.name),
    axisLabel: {
      margin: 20
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barGap: '-100%',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 1, color: '#3398BC' }
        ])
      },
      z: 2,
    },
    {
      // /数据图
      data: dataList.map(item => item.value),
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#4DACFF' },
          { offset: 1, color: '#44D9FC' }
        ])
      },
      z: 1,
    },
    {
      // 最上面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color:'#44D5FC'
      },
      z: 3
    },
    {
      // 最下面菱形
      data: dataList.map(item => item.value),
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'start',
      symbolOffset: ['', '50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#3C7AB9' },
          { offset: 0.5, color: '#3C7AB9' },
          { offset: 0.51, color: '#4DACFF' },
          { offset: 1, color: '#4DACFF' }
        ])
      },
      z: 1
    },
    {
      // 背景图数据图
      data: dataMaxList,
      type: 'bar',
      barWidth: 40,
      itemStyle: {
        color: "rgba(77, 172, 255, 0.2)"
      },
      z: 0,
    },
    {
      // 背景图最上面菱形
      data: dataMaxList,
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: ['40', '30'],
      symbolPosition: 'end',
      symbolOffset: ['', '-50%'],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(77, 172, 255, 0.1)' },
          { offset: 1, color: 'rgba(77, 172, 255, 0.2)' }
        ])
      },
      z: 3
    },
  ]
};

	
	</script>
	
 
</html>